日常生活中常常看到一堆條碼
條碼分成兩種
一維條碼又細分成很多種類型 ex:
CODE128
CODE39
Codabar
EAN系列
EAN-13
EAN-8
EAN-5
EAN-2
UPC (A)
UPC (E)
...etc
想了解更多條碼規則可以看看這篇文章:
https://weberp.com.tw/front/article/68
本文要做出來的是一維條碼
使用的套件是:
https://github.com/lindell/JsBarcode
查了一下規格ISBN條碼
=> EAN13帳單上的一維條碼
=> CODE39
最後做出一個 條碼產生器
Code 3 of 9
總共9條線(5黑4白),其中3條是粗線
比較需要注意的是: 它可以包含 "空白符號" "減號"帳單上出現 "-" 解碼後不一定是真的是 "減號" 可能是 "空白符號"
詳細資訊:
https://www.appsbarcode.com/Code%2039.php
國際標準書號(英語:International Standard Book Number,縮寫為ISBN)
詳細資訊:
https://www.appsbarcode.com/ISBN.php
補充: 上面網址裡附上的範例圖 最上方出現的文字 "減號" 是要被跳過的
舉例:
文字出現ISBN 978-957-678-000-4
input 其實是 9789576780004
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>條碼產生器</title>
<script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.5/dist/JsBarcode.all.min.js"></script>
<style>
body {
padding: 20px;
}
.container {
max-width: 400px;
margin: 0 auto;
text-align: center;
}
input,
select,
button {
margin: 10px 0;
padding: 10px;
width: 100%;
box-sizing: border-box;
}
#wrapper {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div class="container">
<label for="barcodeType">選擇條碼種類:</label>
<select id="barcodeType">
<option value="EAN13">EAN-13</option>
<option value="CODE128">Code 128</option>
<option value="CODE39">Code 39</option>
</select>
<label for="textInput">輸入文字:</label>
<input
type="text"
id="textInput"
placeholder="輸入條碼文字"
value="9789576780004"
/>
<button onclick="generateBarcode()">產生條碼</button>
<div id="wrapper">
<div>
<h2>svg</h2>
<svg id="barcode1"></svg>
</div>
<!-- or -->
<div>
<h2>canvas</h2>
<canvas id="barcode2"></canvas>
</div>
<!-- or -->
<div>
<h2>img</h2>
<img id="barcode3" src="" />
</div>
</div>
</div>
<script>
console.log("範例:", {
EAN13: "9789576780004", //ISBN
CODE128: "Example1234",
CODE39: "CODE39 Barcode",
});
document.getElementById("wrapper").style.display = "none";
function generateBarcode() {
const textInput = document.getElementById("textInput").value;
const barcodeType = document.getElementById("barcodeType").value;
if (textInput) {
JsBarcode("#barcode1", textInput, {
format: barcodeType,
displayValue: true,
height: 50,
});
JsBarcode("#barcode2", textInput, {
format: barcodeType,
displayValue: true,
height: 50,
});
JsBarcode("#barcode3", textInput, {
format: barcodeType,
displayValue: true,
height: 50,
});
document.getElementById("wrapper").style.display = "";
} else {
alert("請輸入條碼文字");
}
}
</script>
</body>
</html>
這篇沒有講到太多程式細節,重點都放在介紹編碼上
因為程式其實套件都處理掉了 參數也很簡單(github介紹的非常詳細)
條碼編碼規則:
https://www.appsbarcode.com/barcode-encode.php
JsBarcode wiki:
https://github.com/lindell/JsBarcode/wiki#barcodes